<template>
  <div class="p-3">
    <h1>消息模板</h1>
    <a-row :gutter="[24, 8]">
      <a-col :span="12">
        <a-card>
          <a-form :model="messageForm" @finish="submitMsg">
            <a-form-item
              label="内容"
              name="text"
              :rules="[{ required: true, message: '请输入内容' }]"
            >
              <a-textarea
                v-model:value="messageForm.text"
                placeholder="请输入内容"
                show-count
                :rows="6"
                :maxlength="1000"
              />
            </a-form-item>
            <a-form-item label="表情前缀" name="prefix_emoji">
              <a-radio-group v-model:value="messageForm.prefix_emoji">
                <a-radio value="">空</a-radio>
                <a-radio value="0">是</a-radio>
                <a-radio value="1">否</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="表情后缀" name="suffix_emoji">
              <a-radio-group v-model:value="messageForm.suffix_emoji">
                <a-radio value="">空</a-radio>
                <a-radio value="0">是</a-radio>
                <a-radio value="1">否</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="字符前缀" name="prefix_char">
              <a-radio-group v-model:value="messageForm.prefix_char">
                <a-radio value="">空</a-radio>
                <a-radio value="0">是</a-radio>
                <a-radio value="1">否</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="字符后缀" name="prefix_char">
              <a-radio-group v-model:value="messageForm.suffix_char">
                <a-radio value="">空</a-radio>
                <a-radio value="0">是</a-radio>
                <a-radio value="1">否</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit">保存</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="12">
        <p>模板列表</p>
        <vxe-table :data="messageData" max-height="400">
          <vxe-column field="text" title="消息内容">
            <template #default="{ row }">
              {{ row.text }}
            </template>
          </vxe-column>
          <vxe-column field="prefix_emoji" title="前表情符号">
            <template #default="{ row }">
              {{ row.prefix_emoji }}
            </template>
          </vxe-column>
          <vxe-column field="suffix_emoji" title="后表情符号">
            <template #default="{ row }">
              {{ row.suffix_emoji }}
            </template>
          </vxe-column>
          <vxe-column field="prefix_char" title="前随机字符">
            <template #default="{ row }">
              {{ row.prefix_char }}
            </template>
          </vxe-column>
          <vxe-column field="suffix_char" title="后随机字符">
            <template #default="{ row }">
              {{ row.suffix_char }}
            </template>
          </vxe-column>

          <vxe-column field="enter_from" title="操作">
            <template #default="{ row }">
              <a-button type="primary">删除</a-button>
            </template>
          </vxe-column>
        </vxe-table>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { http } from "@/plugins/axios";

const messageData = ref([]);
const messageForm = ref({
  prefix_emoji: null,
  suffix_emoji: null,
  prefix_char: null,
  suffix_char: null,
  text: "",
});

const submitMsg = async () => {
  const res = await http.request({
    url: `message`,
    method: "post",
    data: messageForm.value,
  });
};
const getMsg = async () => {
  const { data } = await http.request({
    url: `message`,
    method: "get",
  });
  messageData.value = data;
};
const init = async () => {
  await getMsg();
};
init();
</script>

<style></style>
